<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: orange;
			}
			html,body{
				height: 100%;
				width: 100%;
			}
			.container{
				width: 1190px;
				height: 100%;
				margin: 0 auto;
				
			}
			.container div{
				width: 1190px;
				height: 100%;
				text-align: center;
				font-size: 30px;
			}
			.aside{
				position: fixed;
				width: 40px;
				right: 20px;
				top: 300px;

			}
			.aside li{
				height: 50px;
				border-bottom: 1px solid #ddd;
				font-size: 16px;
				font-weight: 700;
				text-align: center;
				line-height: 150%;
			}
			.current{
				background-color: orangered;
			}
		</style>
	</head>
	<body>
		<div class="container" id="box">
			<div>爱逛好货</div>
			<div>好店主播</div>
			<div>品质特色</div>
			<div>猜你喜欢</div>
		</div>
		<ul class="aside" id="aside">
			<li class="current"><a href="javascript:void(0);">爱逛好货</a></li>
			<li><a href="javascript:void(0);">好店主播</a></li>
			<li><a href="javascript:void(0);">品质特色</a></li>
			<li><a href="javascript:void(0);">猜你喜欢</a></li>
		</ul>
	</body>
	<script src="JS/myAnimation2.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload = function(){
			var box = document.getElementById('box');
			var aside = document.getElementById('aside');
			var boxs = box.children;
			var lis = aside.children
			var colors = ['skyblue','darkgreen','pink','orange']
			var isclick = false;
			for(var a = 0;a < boxs.length;a++){
				boxs[a].style.backgroundColor = colors[a];
			}
			for(var b = 0;b<lis.length;b++){
				lis[b].index = b
				lis[b].onclick = function(){
					isclick = true;
					for(var c = 0;c<lis.length;c++){
						lis[c].className = '';
					}
					this.className = 'current'
					trans(document.documentElement,{"scrollTop": this.index * document.body.clientHeight},function(){
						isclick = false;
					})
				}
			}
			window.onscroll = function(){
				if(!isclick){
					var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					for(i = 0;i<boxs.length;i++){
						if(boxs[i].offsetTop < docScrollTop){
							for(j = 0;j<boxs.length;j++){
								lis[j].className = '';
							}
							lis[i].className = 'current'
						}
					}
				}
			}
		}
	</script>
</html>
